<template>
  <el-container>
    <el-header style="border-bottom: 1px solid rgba(255,255,255,0.12)">
      <p style="font-family: MicrosoftYaHei;font-size: 16px;color: #7DDAFF;">违停信息</p>
    </el-header>
    <el-main>
      <el-row class="btn-group">
        <el-button class="btn" @click="handleDownloadIllPark">
          <span>导出</span><i class="el-icon-download"></i>
        </el-button>
      </el-row>

      <el-table :data="dataList" v-loading="listLoading" element-loading-text="给我一点时间"
                ref="illParkTable"
                element-loading-background="rgba(0, 0, 0, .3)"
                height="500"
                :row-class-name="tableRowClassName"
                style="width: 100%;padding-top: 0px;background-color: #1B4685">
        <el-table-column fixed sortable align="center" label="违停流水号" prop="parkname" width="150" >
          <template slot-scope="scope">
            <span>{{scope.row.parkname}}</span>
          </template>
        </el-table-column>
        <el-table-column  sortable align="center" label="违停单号" prop="parkno" width="150">
          <template slot-scope="scope">
            <span>{{scope.row.parkno}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="车牌号" sortable prop="placeNum" width="150">
          <template slot-scope="scope">
            <span>{{scope.row.placeNum}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="上传人员" sortable prop="placeNum" width="150">
          <template slot-scope="scope">
            <span>{{scope.row.placeNum}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="所属单位" sortable prop="placeNum" width="150">
          <template slot-scope="scope">
            <span>{{scope.row.placeNum}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="定位位置" sortable prop="placeNum" width="150" >
          <template slot-scope="scope">
            <span>{{scope.row.placeNum}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="上传时间" sortable prop="placeNum" width="150">
          <template slot-scope="scope">
            <span>{{scope.row.placeNum}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核状态" sortable prop="placeNum" width="150">
          <template slot-scope="scope">
            <span>{{scope.row.placeNum}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="审核时间" sortable prop="placeNum" width="150">
          <template slot-scope="scope">
            <span>{{scope.row.placeNum}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="违法地点编号" sortable prop="placeNum" width="150">
          <template slot-scope="scope">
            <span>{{scope.row.placeNum}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="违停位置" sortable prop="placeNum" width="150">
          <template slot-scope="scope">
            <span>{{scope.row.placeNum}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="采集机关编号" sortable prop="placeNum" width="150">
          <template slot-scope="scope">
            <span>{{scope.row.placeNum}}</span>
          </template>
        </el-table-column>

        <el-table-column fixed="right" align="center" label="操作">
          <template slot-scope="scope">
                <span class="btn-group" >
            <el-button class="btn" style=" margin-bottom: 0px"
                       @click="handleReview(scope.row)"><span>审核</span><i class="el-icon-edit-outline"></i>
            </el-button>
                </span>
          </template>
        </el-table-column>
      </el-table>

    </el-main>
    <el-footer>
      <el-pagination style="margin-top: 16px" background
                     @size-change="handleSizeChangeIllPark"
                     @current-change="handleCurrentChangeIllPark"
                     :current-page="listQuery.page"
                     :page-sizes="[10,20,30, 50]"
                     :page-size="listQuery.limit"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-footer>
    <el-dialog title="审核" :visible.sync="dialogReviewVisible" center>
      <el-form     :model="reviewModel" :label-position="'left'" label-width="90px" style="width: 400px; margin-left:50px;" >
        <el-form-item label="违停单号" prop="out_trade_no">
          <el-input clearable readonly v-model="reviewModel.out_trade_no"></el-input>
        </el-form-item>
        <el-form-item label="违停流水号" prop="account_no">
          <el-input clearable readonly v-model="reviewModel.account_no"></el-input>
        </el-form-item>
        <el-form-item label="车牌号" prop="account_carno">
          <el-input clearable readonly v-model="reviewModel.account_carno"></el-input>
        </el-form-item>
        <el-form-item label="违停地点" prop="account_money">
          <el-input clearable readonly v-model="reviewModel.account_money"></el-input>
        </el-form-item>
        <el-form-item label="审核意见" prop="auditopinion">
          <el-input clearable type="textarea" v-model="reviewModel.auditopinion" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="checkDialog = false" class="btn-search">取消</el-button>
        <el-button  type="primary" class="btn-search" @click="review">确定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
  /* eslint-disable */
  export default {
    name: "ill-park-table",
    props: ['searchList', 'listLoadingIllPark'],
    watch: {
      searchList(val) {
        this.dataList = val.list
        this.total = val.count
      },
      listLoadingIllPark(val) {
        this.listLoading = val
      }
    },
    data() {
      return {
        listLoading: false,
        dialogReviewVisible: false,
        dataList: [],
        total: 0,
        listQuery: {
          page: 1,
          limit: 20
        },
        tempParkInfo: {

        },
        reviewModel(){

        }
      }
    },
    methods:{
      handleDownloadIllPark(){
      },
      handleSizeChangeIllPark(val) {
        this.listQuery.limit = val
        this.$emit("handleSizeChangeIllPark",val)
      },
      handleCurrentChangeIllPark(val) {
        this.listQuery.page = val
        this.$emit("handleCurrentChangeIllPark",val)
      },
      handleReview(val){
        this.dialogReviewVisible=true
      },
      review(){
        this.dialogReviewVisible=false
      },
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 === 0) {
          return 'one-row';
        }
        return '';
      }
    }
  }
</script>

<style scoped>
  .btn-group > .el-button span{
    display: none;
  }
  .btn-group > .el-button:hover{
    background-color: #409EFF;
  }
  .btn-group > .el-button:hover span{
    display: block;
  }
  .btn-group > .el-button:hover i{
    display: none;
  }

</style>
